<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto">A</i><span>医生详情</span><span>&nbsp;</span>
        </div>
        <div class="header-bottom">
          <div class="left">
            <p class="name">{{ detail.doctorName }}</p>
            <p class="ranktime">
              <span class="rank">{{ detail.doctorRank }}</span
              ><span class="time">从业{{ detail.doctorTime }}年</span>
            </p>
          </div>
          <div class="right">
            <img
              src="https://img0.baidu.com/it/u=224081144,463462312&fm=26&fmt=auto"
              alt=""
            />
            <i class="title">{{ detail.doctorTitle }}</i>
          </div>
        </div>
      </div>
    </header>
    <div class="content">
      <div class="same">
        <p class="introducetil">简介</p>
        <p class="introduce">
          {{ detail.doctorHospital }}
        </p>
        <p class="merittil">擅长</p>
        <p class="merit">
          <span v-for="(item, index) in detail.doctor_merit" :key="index"
            ><span v-show="index != 0">、</span>{{ item.name }}
          </span>
        </p>
      </div>
    </div>
    <footer>
      <div class="same">
        <router-link :to="'/Register/' + detail.hospitalId">
          <button>预约挂号</button>
        </router-link>
      </div>
    </footer>
  </div>
</template>
<script>
import { doctordetail } from "../../api/doctor";
export default {
  data() {
    return {
      detail: [],
    };
  },

  methods: {
    goto() {
      this.$router.go(-1);
    },
    getdetail() {
      doctordetail(this.$route.params.id).then((res) => {
        this.detail = res.data.data;
        // console.log(this.detail);
      });
    },
  },
  created() {
    this.getdetail();
  },
};
</script>

<style scoped lang="scss" >
.box {
  background: #f1f1f1;
}
header {
  border-radius: 0 0 2vw 2vw;
  background: #fff;
  .header {
    font-size: 4.7vw;
    display: flex;
    justify-content: space-between;
    padding: 3vh;
    align-items: center;
  }
  .header-bottom {
    padding: 1vw 4vh 4.5vw 4vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    .left {
      .ranktime {
        padding: 1vw 0;
        font-size: 4vw;
        color: #ccc;
      }
    }
    .right {
      position: relative;
      img {
        width: 21vw;
        border-radius: 50%;
      }
      .title {
        width: 13vw;
        bottom: 2vw;
        left: 50%;
        transform: translateX(-4.2vh);
        position: absolute;
        font-size: 1vw;
        background: #e1e1e1;
        padding: 0.2vw 1vw;
        color: rgb(160, 160, 160);
        border-radius: 0.5vw;
        display: block;
      }
    }
  }
}
.content {
  width: 100%;
  border-radius: 2vh 2vh 0 0;
  padding: 3.5vh 0;
  margin-top: 2vh;
  background: #fff;
  color: rgb(63, 63, 63);
  .introducetil {
    font-size: 2.5vh;
    padding: 0 2vh;
  }
  .introduce {
    padding: 2vh 2vh;
    font-size: 2vh;
  }
  .merittil {
    font-size: 2.5vh;
    padding: 0 2vh;
  }
  .merit {
    font-size: 2vh;
    padding: 2vh 2vh 4vh 2vh;
  }
}
footer {
  position: fixed;
  bottom: 0;
  border-top: 0.1vh solid #c1c1c1;
  background: #fff;
  width: 100%;
  button {
    a {
      color: #fff;
    }
    margin: 1.7vh 0;
    border-radius: 5vh;
    width: 100%;
    height: 6vh;
    background: #31d192;
    border: 0;
    font-size: 2.5vh;
    color: #fff;
    // padding: 2vh 5vh;
  }
}
</style>